<template>
  <Header></Header>
  <DrawerTwo></DrawerTwo>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/pageList/'+ids }">档案管理</el-breadcrumb-item>
  </el-breadcrumb>

  <div class = 'pageListBotton'>

      <el-button :icon="Expand" style="color: white;background: #2AB28B" round @click="onPageList">
      婴幼儿列表
    </el-button>

    <span class="onBtnRight" @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>

  <div class="pageListBotton">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="监护人">
        <el-input v-model="guardian" placeholder="请输入监护人姓名/手机号"></el-input>
      </el-form-item>

      <!-- <el-form-item>
        <div class="page_provider_title">出生日期</div>
        <el-config-provider :locale="zhCn">
          <el-date-picker
              v-model="birth"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{'float':'left'}"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item>

      <el-form-item>
        <el-config-provider :locale="zhCn">
          <div class="page_provider_title">创建时间</div>
          <el-date-picker
              v-model="establish"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{'float':'left'}"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="onDefault(0,0, 1)" style="background-color:#CA1C1B;color:white">搜索</el-button>
        <el-button Plain @click="onDefault(1,0, 1)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>


  <el-table :data="tableData" style="width: 85%;margin-left: 5%;" v-infinite-scroll="load"  infinite-scroll-disabled="loading" >
    <div class="loading" v-if="loading">
      <span id="load-text">{{loadText}}</span>
    </div>
    <el-table-column prop="id" label="序号" />
    <el-table-column prop="username" label="姓名" />
    <el-table-column prop="sex" label="性别">
      <template #default="scope">
        <span v-if="scope.row.sex == 2">男</span>
        <span v-if="scope.row.sex == 1">女</span>
      </template>
    </el-table-column>
    <el-table-column prop="height" label="身高" />
    <el-table-column prop="weight" label="体重" />
    <el-table-column prop="birth" label="出生日期" />
    <el-table-column prop="guardian_name" label="监护人姓名" />
    <el-table-column prop="guardian_mobile" label="监护人手机号" />

    <el-table-column prop="numbers" label="测评次数">
      <template #default="scope">
        <span>{{ scope.row.numbers }}次</span>
      </template>
    </el-table-column>

    <el-table-column prop="createtime" label="创建时间" width="200"/>
    <el-table-column fixed="right" label="操作档案">
      <template #default="scope">
        <!-- <el-button type="text" size="small" @click="handleClick(scope.row.id)">编辑</el-button> -->
        <el-button type="text" size="small" @click="onEvaluation(scope.row.id)">测评</el-button>
        <el-button type="text" size="small" @click="onGetReport(scope.row.id)">报告</el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-dialog v-model="dialogTableVisible" title="查看报告" width="60%">
      <el-table :data="gridData"  @row-click="onLookReport" >
        <el-table-column
            property="username"
            label="姓名"
            width="150"
        ></el-table-column>
        <el-table-column
            property="guardian_name"
            label="监护人姓名"
            width="200"
        ></el-table-column>
        <el-table-column property="guardian_mobile" label="监护人手机号" width="150"></el-table-column>
        <el-table-column property="report" label="报告" width="200"></el-table-column>
        <el-table-column property="id" label="操作">
          <el-button type="primary" style="width: 100px">查看报告</el-button></el-table-column>

      </el-table>
    </el-dialog>


  <!--    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">-->
  <!--      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>-->
  <!--    </ul>-->


</template>

<script>
import { Edit, CirclePlus, Search, Expand,  } from '@element-plus/icons-vue'
import Header from './common/Header.vue';
import {ElMessage} from "element-plus";
import zhCn from'element-plus/lib/locale/lang/zh-cn'
import DrawerTwo from './common/DrawerTwo.vue';

export default {
  name: "pageList",
  components: {
    Header,
    DrawerTwo,
  },

  data() {
    return {
      labelPosition: 'top',
      labName: '',
      ids:'',
      zhCn,
      name:'',
      guardian:'',
      birth:[],
      establish:[],
      pages: 1,
      totalPages:'',
      limit: 20,
      loading:false,
      loadText:'正在加载...',
      tableData: [
      ],
    }
  },
  created() {
    this.onDefault(0);
  },
  methods: {
    load () {
      //滑到底部时进行加载
      // this.loading = true;
      // this.pages += 20; //页数+10
      // this.onDefault(0,1); //调用接口，此时页数+1，查询下一页数据
    },
    async onDefault(isReset, addTo = 0, Botton = 0) {
      if(this.$route.params.groupId) {
        this.ids = this.$route.params.groupId

        if (this.ids == 3) {
          this.labName = '高危儿养测评'
        } else if (this.ids == 5) {
          this.labName = '孕产妇营养测评'
        } else if (this.ids == 6) {
          this.labName = '成年人营养测评'
        } else if (this.ids == 7) {
          this.labName = '慢性病营养测评'
        } else if (this.ids == 8) {
          this.labName = '团体营养测评'
        }

        if(isReset == 1) {
          this.name = '';
          this.guardian = '';
          this.birth = '';
          this.establish = '';
        }
        if(Botton == 1) {
          this.pages = 0;
        }

        let params = {
          'group_id': this.ids,
          'pages': this.pages,
          'limit': this.limit,
          'is_high' : '是',
        }

        if (this.name != "") {
          params.username = this.name
        }
        if (this.guardian != "") {
          params.guardian_name = this.guardian
        }
        if (this.birth[0] != undefined) {
          params.birth_start = this.$getTimes(this.birth[0]);
        }
        if (this.birth[1] != undefined) {
          params.birth_end = this.$getTimes(this.birth[1]);
        }
        if (this.establish[0] != undefined) {
          params.start_time = this.$getTimes(this.establish[0]);
        }
        if (this.establish[1] != undefined) {
          params.end_time = this.$getTimes(this.establish[1]);
        }

        params.pages = this.pages


        let data = await this.$getPageList(params)
        let len = data.data.data.contents.length

        if (data && len == 0 && !len) {
          this.loadText = '没有找到相关数据'
        } else if (data && len < 10) {
          this.loadText = '暂无更多数据'
        } else {
          this.loading = false
        }

        if(addTo == 1){
          this.tableData = this.tableData.concat(data.data.data.contents); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
        } else {
          this.tableData = data.data.data.contents;
        }
        this.totalPages = data.data.data.totalPages;
      } else {
        ElMessage.error('栏目编号不得为空')
        await this.$router.push({'path': '/Home'})
      }
    },
    onHome(){
      this.$router.push({'path':'/Home/'})
    },
    onPageAdd(){
      this.$router.push({'path':'/HighpageAdd/' + this.ids})
    },
    handleClick(ids){
      this.$router.push({'path':'/HighpageEdit/' + this.ids +'/'+ ids})
    },
    onPageList(){
        this.$router.push({'path':'/pageList/' + this.ids})
    },
    onEvaluation(ids){
      this.$router.push({'path':'/HighEvaluation/' + this.ids +'/'+ ids})
    },

    onCompanyList(ids){
      this.$router.push({'path':'/CompanyList/' + this.ids})
    },


    formInline(){

    },
  },
}

</script>

<script setup>
import {useRoute, useRouter} from "vue-router"
import { reactive, ref } from 'vue'
import {ElMessage} from "element-plus";
import http from "../utils/http";
const dialogTableVisible = ref(false)
const formLabelWidth = '120px'
const gridData = ref([])
const route = useRoute()
const router = useRouter()

const onGetReport = async (id) => {
  // console.log(id)
  http.get('api/archives/generatelist?id='+ id +'&type=analysis').then((res)=>{
    if(res.data.code === 0) {
      ElMessage.error(res.data.msg)
    } else {
      console.log(res.data.data.archivesReport,'wuhu')
      gridData.value = res.data.data.archivesReport
      dialogTableVisible.value = true
    }
  })
  // await router.push({'path': '/Home'})
}
const onLookReport = async (row) => {

  const { href } = await router.resolve({
    path:  "/Highreport/"+row.group_id+"/"+row.member_id+'/'+row.id
  });
  window.open(href, "_blank");

}

</script>

<style scoped>
@import '../assets/css/common.css';
/deep/.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
  /*font-weight: 700;*/
  color: #2AB28B;
  text-decoration: none;
  transition: var(--el-transition-color);
  color: var(--el-text-color-primary);

}



</style>
<style>
.pageListBotton{
  margin-top: 40px;
  margin-left: 120px;
}

.pageListBotton .el-button--primary {
  background-color: #2AB28B;
  border: #2AB28B;
  width: 141px;
  height: 58px;
}

.pageListBotton .el-button--success {
  background-color: #2AB28B;
  border: #2AB28B;
  color:#fff;
}

.onBtnRight {
  cursor:pointer;
  width: 20%;
  font-size: 18px;
  float: right;
  color:#2AB28B;
}
.onBtnRight img{
  width: 14px;
  padding-right: 10px;
}
.onBtnRight:hover{
  color: #409eff;
}
.page_provider_title {
  float: left;
  font-size: 14px;
  padding-right: 10px;
}
.xinjian{
  position: relative;
}
.xinjian img{
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: 20px;
}
.cell  .el-button {
  width: 32px;
}


</style>
